<template>
    <input class="switch-component" v-model="showImage" type="checkbox" @change="checkChange()" />
</template>
<script setup>

import { ref } from 'vue'
const showImage = ref(false)

let emit = defineEmits('changes')
const checkChange = () => {
    emit('changes', showImage.value)
}
</script>
<style>
.switch-component {
    cursor: pointer;
    position: relative;
    width: 60px;
    height: 30px;
    background-color: #dadada;
    border-radius: 30px;
    border: none;
    outline: none;
    -webkit-appearance: none;
    transition: all .2s ease;
}


.switch-component::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background-color: #fff;
    border-radius: 50%;
    transition: all .2s ease;
}

.switch-component:checked {
    background-color: #42d392;
}

.switch-component:checked::after {
    left: 50%;
}
</style>